<template>
  <div class="login">
    <div class="logn_left"></div>
    <div class="logn_right">
      <p class="login_right_top">瑞思教育用户中心</p>
      <div class="login_middle">
        <el-form
          ref="formData"
          :model="formData"
          :rules="loginRules"
          autocomplete="on"
          class="from-style"
        >
          <h3 class="title">登录瑞思教育用户中心</h3>
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              ref="username"
              type="text"
              auto-complete="off"
              clearable
              placeholder="账号"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-bottom:60px;">
            <el-input
              v-model="formData.password"
              ref="password"
              :type="passwordType"
              auto-complete="off"
              placeholder="密码"
            >
            </el-input>
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="logining"
            style="width:100%;margin-bottom:16px;"
            >登录</el-button
          >
          <div class="login_text">创新发展中心提供技术支持</div>
        </el-form>
      </div>
    </div>
    <!-- <div class="login-left">
      <div class="login-header">
      </div>
      <div class="login-middle">
        <div class="login-form-middle">
          <div class="form-left">
            <img src="../../assets/login/left-login.png" />
          </div>
          <div class="form-right">
            <el-form ref="formData" :model="formData" :rules="loginRules" autocomplete="on" class="from-style">
              <h3 class="title">瑞思教育用户中心</h3>
              <el-form-item prop="username">
                <el-input v-model="formData.username" ref="username" type="text" auto-complete="off" clearable placeholder="账号">
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="formData.password" ref="password" :type="passwordType" auto-complete="off" placeholder="密码">
                </el-input>
                <span class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="logining"
                style="width:100%;margin-bottom:22px;">登录</el-button>
              <div class="login_text">创新发展中心提供技术支持</div>  
            </el-form>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate'
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      logining: false,
      showCode: false,
      isCodeLogin: true,
      disabled: false,
      passwordType: 'password',
      time: 0,
      btntxt: '重新发送',
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入正确的账号' }
        ],
        password: [{ required: true, validator: validatePassword }]
      },
      formData: {
        username: '',
        password: ''
      },
      redirect: undefined
    }
  },
  created() {
    this.enterSubmit()
  },
  computed: {},
  mounted() {
    if (this.formData.username === '') {
      this.$refs.username.focus()
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.logining = true
          this.$store
            .dispatch('user/login', this.formData)
            .then(res => (this.logining = false))
            .catch(res => (this.logining = false))
        } else {
          return false
        }
      })
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = 'text'
      } else {
        this.passwordType = 'password'
      }
    },
    enterSubmit() {
      document.onkeydown = e => {
        let _key = window.event.keyCode
        if (_key === 13) {
          this.handleSubmit()
        }
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    height: 48px;
    line-height: 48px;
  }
  .el-button {
    padding: 16px 15px;
  }
}
.login {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  min-width: 1360px;
  // background: url('../../assets/login/bg-login.png') no-repeat;
  // background-size: cover;
  // background-position: center;

  .logn_left {
    width: 550px;
    height: 100%;
    float: left;
    background: url('../../../assets/login_left_bg.png') no-repeat;
    background-size: cover;
    background-position: center;
  }

  .logn_right {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    .login_right_top {
      position: absolute;
      top: 36px;
      right: 28px;
      font-size: 20px;
    }
    .login_middle {
      width: 500px;
      height: 456px;
      padding: 60px;
      box-shadow: 0px 4px 16px 0px rgba(18, 18, 19, 0.14);
      border-radius: 8px;
      border: 1px solid #d7dae0;
      .title {
        margin: 0;
        margin-bottom: 40px;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #141e32;
        line-height: 32px;
      }
      .login_text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c5cbd6;
        line-height: 20px;
      }
    }
  }

  .login-left {
    height: 100%;
    display: flex;
    flex-direction: column;

    .login-header {
      width: 100%;
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 11%;

      .login-header-logo {
        img {
          width: 50px;
          height: 50px;
        }
      }

      .login-header-right {
        display: flex;
        color: #fff;
        font-size: 14px;

        span {
          color: #e9e9e9;
          margin: 0 25px;
        }

        .header-focus {
          position: relative;
          cursor: pointer;

          .focus-img {
            img {
              width: 114px;
              height: 114px;
              position: absolute;
              right: 0px;
              z-index: 9;
            }
          }
        }
      }
    }

    .login-middle {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .login-form-middle {
        background: #ffffff;
        border-radius: 10px;
        width: 1097px;
        height: 454px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 53px;

        .form-left {
          flex: 1;

          img {
            height: 304px;
            width: 475px;
          }
        }

        .form-right {
          flex: 1;
          display: flex;
          justify-content: center;
          height: 100%;

          .from-style {
            width: 350px;

            .title {
              text-align: center;
              font-size: 30px;
              font-weight: 500;
              color: #323233;
              margin: 60px 0 50px 0;
            }

            .el-form-item {
              margin-bottom: 30px;
            }

            .code {
              max-width: 57%;
              margin-right: 12px;
            }
          }

          .form-bottom {
            width: 100%;
            display: flex;
            justify-content: flex-end;
          }

          .el-dropdown-link {
            cursor: pointer;
          }
        }
      }
    }

    .login-bottom {
      margin: 0 0 75px 0;
      text-align: center;
      height: 20px;
      line-height: 20px;
      color: #fff;
      font-size: 14px;
    }
  }
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 16px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}

.login_text {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #c2c5cc;
}
</style>
